import { defineComponent, reactive } from 'vue';
import './DeckCardDetail.less';
import type { CardDetail } from '/@/api/verse/model/cardModel';
import { useVModels } from '@vueuse/core';
import { Popup, ConfigProvider } from 'vant';
import { LinkCardDetailApi } from '/@/api/verse/card';
import { awaitWrap } from '/@/utils';
import { Icon } from '/@/components/Icon';
import setting from '/@/settings/projectSetting';

export default defineComponent({
  name: 'DeckCardDetail',
  props: {
    show: {
      type: Boolean as PropType<boolean>,
      required: true,
      default: () => {
        return false;
      },
    },
    cardId: {
      type: Number as PropType<number>,
      required: true,
    },
  },
  setup(props, { emit }) {
    const { show } = useVModels(props, emit);

    const detailData = reactive<{ list: CardDetail[]; current: CardDetail; currentIndex: number }>({
      list: [],
      current: {} as CardDetail,
      currentIndex: 0,
    });

    const getLinkCard = async () => {
      const { cardId } = props;
      detailData.current = {} as CardDetail;
      detailData.currentIndex = 0;
      detailData.list = [];
      const [error, data] = await awaitWrap(LinkCardDetailApi({ card_id: cardId }));
      if (error) {
        return false;
      }
      const result = data as CardDetail[];
      for (let i = 0; i < result.length; i++) {
        detailData.list.push(result[i]);
      }
      detailData.current = result[0];
    };

    const CardDetail = () => {
      const { current: cardDetailInfo } = detailData;
      // 属性
      const attrArr = cardDetailInfo.attr ? cardDetailInfo.attr.split(',') : [];
      const attrHtml: VueNode[] = [];
      if (attrArr.length > 0) {
        attrArr.map((item) => {
          attrHtml.push(<span>{item}</span>);
        });
      }

      return (
        <div class={'card-detail-container'}>
          <div class={'image-area'}>
            <img src={cardDetailInfo.img} alt='' />
          </div>
          <div class={'card-title flex'}>
            <h2 class={'name'}>{cardDetailInfo.name}</h2>
            <div class={'card-rarity flex flex-1 justify-end'}>
              {cardDetailInfo.card_class === '进化' ? (
                <img src={`${setting.imgUrlCdn}card-tools/verse/card/evo.png`} alt='' />
              ) : null}
              <img src={`${setting.imgUrlCdn}card-tools/verse/card/${cardDetailInfo.rarity}.png`} alt='' />
              <img
                src={`${setting.imgUrlCdn}card-tools/verse/card/${cardDetailInfo.is_foil ? 'flash' : 'flat'}.png`}
                alt=''
              />
            </div>
          </div>
          <div class={'card-faction text-xs text-gray-400 flex justify-between'}>
            <span class={'basis-8/12 van-ellipsis'}>{cardDetailInfo.ename}</span>
            <span>
              {cardDetailInfo.card_career}-{cardDetailInfo.card_category}
            </span>
          </div>
          <div class={'card-attr flex text-xs'}>{attrHtml}</div>
          <div class={'card-series flex justify-between text-xs van-ellipsis '}>
            <div class={'mr-md'}>
              系列：<span class={'text-purple-500'}>{cardDetailInfo.series_name}</span>
            </div>
            <span>{cardDetailInfo.card_no}</span>
          </div>
          <p class='rule text-xs whitespace-pre-line'>{cardDetailInfo.rule}</p>
          <p class='description text-xs text-gray-400 whitespace-pre-line'>{cardDetailInfo.description}</p>
        </div>
      );
    };
    const PaginationPaper = () => {
      const onPageClick = (action: 'prev' | 'next') => {
        if (action === 'prev' && detailData.currentIndex) {
          detailData.currentIndex -= 1;
          detailData.current = detailData.list[detailData.currentIndex];
          return;
        }
        if (action === 'next' && detailData.list.length !== detailData.currentIndex + 1) {
          detailData.currentIndex += 1;
          detailData.current = detailData.list[detailData.currentIndex];
        }
      };
      const calzz = 'pagination-item-link flex items-center justify-center';
      let prev = '';
      let next = '';
      if (!detailData.currentIndex) {
        prev = ' disabled';
      }
      if (detailData.list.length === detailData.currentIndex + 1) {
        next = ' disabled';
      }
      return (
        <div class={'pagination-paper-container flex items-center justify-between'}>
          <div
            class={calzz + prev}
            onClick={() => {
              onPageClick('prev');
            }}
          >
            <Icon icon='ph:arrow-left-bold' class={'mr-sm'} />
            <span>关联卡牌</span>
          </div>
          <div class={'pagination-item-num'}>
            <span>{detailData.currentIndex + 1}</span>
            <span>/</span>
            <span>{detailData.list.length}</span>
          </div>
          <div
            class={calzz + next}
            onClick={() => {
              onPageClick('next');
            }}
          >
            <span>关联卡牌</span>
            <Icon icon='ph:arrow-right-bold' class={'ml-sm'} />
          </div>
        </div>
      );
    };

    return () => (
      <ConfigProvider>
        <Popup
          v-model={[show.value, 'show']}
          class={'deck-card-detail-popup'}
          teleport={'body'}
          round={true}
          onOpen={getLinkCard}
          closeable
        >
          <CardDetail />
          <PaginationPaper />
        </Popup>
      </ConfigProvider>
    );
  },
});
